<template>
	<nt-container bg-color="#fff">
		<view class="nt-submit">
			<view class="nt-submit-item border pad_lr">
				<nt-title label="成本内容">
					<template #right>
						<view class="cost">总成本：{{finalCost || 0}}</view>
					</template>
				</nt-title>
			</view>
			<view class="nt-submit-item border pad">
				<view class="nt-submit-item__type">
					<view class="nt-submit-item__type--label">配件种类</view>
					<view class="nt-submit-item__type--list">
						<view class="nt-submit-item__type--item"
							:class="{ company: it.value == 1, self: it.value == 2, procure: it.value == 3 }"
							v-for="it in partsTypeList" :key="it.value" @tap="addParts(it.value)">{{it.label}}</view>
					</view>
				</view>
			</view>
			<view class="parts-list">
				<view class="parts-list__item" v-for="(it, index) in allPartsList" :key="index+new Date()"
					:class="{ company: it.type == 1, self: it.type == 2, procure: it.type == 3 }">
					<view class="parts-list__item--content">
						<view class="parts-list__item--content-type" @tap="selectParts(it.type, index)">
							<!-- {{ it.type == 1 ? '公司配件' : it.type == 2 ? '采购配件' : '个人配件' }} -->
							{{
								it.name || (it.type == 1 ? '公司配件' : it.type == 2 ? '采购配件' : '个人配件')
							}}
							<text class="iconfont">&#xe6bb;</text>
						</view>
						<view class="parts-list__item--content-name" :class="{ empty: !it.name }">
							<!-- {{ it.name || '名称' }} -->
							<u--input v-model="it.customName" placeholder="名称" :readonly="it.type != 2"></u--input>
						</view>
						<view class="parts-list__item--content-number" :class="{ empty: !it.quantity }">
							{{ it.quantity || '数量' }}</view>
						<view class="parts-list__item--content-price" :class="{ empty: !it.price }">
							<u--input v-model="it.price" placeholder="价格" :readonly="it.type != 2"></u--input>
						</view>
					</view>
					<view class="parts-list__item--btn" @tap="deleteParts(index)">-</view>
				</view>
			</view>

			<view class="nt-submit-item border pad_lr" v-if="showProcureUpload">
				<nt-title label="上传采购图片">
					<template #right>
						<view class="tip">每张图片大小不能超过1M</view>
					</template>
				</nt-title>
				<div class="nt-submit-item__procure">
					<nt-upload :max-count="100" @success="procureImage = $event"
						:images="orderInfo.purchase_images"></nt-upload>
				</div>
			</view>

			<view class="gap"></view>
			<view class="nt-submit-item border pad_lr fault">
				<nt-title label="返修故障类型">
					<template #right>
						<div class="fault-title">（可多选）</div>
					</template>
				</nt-title>
				<view class="nt-submit-item__fault">
					<u-checkbox-group v-model="problem_type" placement="row">
						<u-checkbox :customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in formConfig.problemTypeList" :key="index" :label="item.name"
							:name="item.value">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view class="nt-submit-item border pad pad_tb">
				<view class="nt-submit-item__label" style="margin-bottom: 20rpx;">返修内容</view>
				<view class="nt-submit-item__content">
					<u-textarea v-model="problem" placeholder="请输入返修内容" ref="textarea"></u-textarea>
					<!-- <view class="nt-submit-item__content--select" @tap="show = true" >
						{{ selectDate || '点击选择' }}
						<text class="iconfont">&#xe6bb;</text>
					</view> -->
				</view>
			</view>

			<view class="nt-submit-footer">
				<nt-button text="保存录入详情" @click="submit"></nt-button>
			</view>
		</view>
		<u-picker :show="showParts" ref="uPicker" :columns="columns" keyName="name" @confirm="confrimParts"
			@close="showParts = false" @cancel="showParts = false" closeOnClickOverlay></u-picker>
		<u-picker :show="showProcureParts" ref="uPicker" :columns="procureColumns" keyName="name"
			@confirm="confrimParts" @close="showProcureParts = false" @cancel="showProcureParts = false"
			@change="changeHandler" closeOnClickOverlay></u-picker>
	</nt-container>
</template>

<script>
	import Mixins from "./mixins"
	import {
		repairSubmitDetails
	} from "@/api"
	export default {
		mixins: [Mixins],
		data() {
			return {
				problem_type: [],
				problem: ""
			}
		},
		async onLoad(options) {
			this.orderId = options.id
			this.init()
			// await this.getFormConfig()
			// await this.getDetail()
		},
		methods: {
			submit() {
				const formData = this.formatParams("repair")
				if (!this.problem_type.length) return this.toast("请选择返修故障类型")
				if (!this.problem) return this.toast("请输入返修内容")
				if (!formData) return;
				const {
					purchase,
					realorder_id,
					company,
					person,
					purchase_images
				} = formData
				repairSubmitDetails({
					purchase,
					realorder_id,
					company,
					person,
					purchase_images,
					problem_type: this.problem_type,
					problem: this.problem
				}).then(res => {
					if (res.code === 1) {
						this.toast("提交成功")
						setTimeout(() => this.back(), 1000)
					}
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	@import "./submit.scss";

	.nt-submit-item__content {
		/deep/ .u-border {
			border: none;
		}

		/deep/ .u-textarea {
			background: #f9f9f9;
		}
	}

	/deep/ .u-checkbox-group--row {
		flex-wrap: wrap;
	}

	/deep/.u-checkbox {
		margin: 20rpx 30rpx 0 0
	}

	.nt-submit-item {
		&.fault {
			/deep/ .nt-title {
				justify-content: flex-start;
			}
		}

		.fault-title {
			color: #f00;
			margin-left: 10rpx;
			font-weight: bold;
		}
	}
</style>